<template>
  <c-log-tabs :source-id="$route.query.id">
    <div class="detail">
      <div v-if="$route.query.type" class="bread-box but20">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>装修任务管理</el-breadcrumb-item>
          <el-breadcrumb-item>详情</el-breadcrumb-item>
        </el-breadcrumb>
        <div>
          <el-button size="mini" @click.native="goBack">返回</el-button>
        </div>
      </div>
      <c-section title="门店建设基本信息">
        <template v-slot:right>
          <c-abnormal-preview path="/storeConstruction/exceptionManage" :query="{ constCode: detail.constCode, functionModel: 'SHOP_DECORATION' }" />
        </template>
        <c-list :column="3">
          <c-list-item label="门店编码" :value="detail.shopCode" />
          <c-list-item label="门店" :value="detail.shopName" />
          <c-list-item label="所属客户编码" :value="detail.clientCode" />
          <c-list-item label="所属客户" :value="detail.clientName" />
          <c-list-item label="所属办事处" :value="detail.officeName" />
          <c-list-item label="办事处性质" :value="detail.officeNature" />
          <c-list-item label="门店类型" dict-type-code="SHOP_TYPE" :value="detail.shopType" />
          <c-list-item label="门店业务类型" dict-type-code="BIZ_TYPE" :value="detail.shopBizType" />
          <c-list-item label="门店城市级别" dict-type-code="CITY_LEVEL" :value="detail.shopCityLevel" />
          <c-list-item label="门店详细地址" :value="detail.shopAddress" :span="3" />
          <c-list-item label="门店建设项目号" :value="detail.constCode" />
          <c-list-item label="门店营业状态" dict-type-code="SHOP_BIZ_STATE" :value="detail.businessStatus" />
          <c-list-item label="报图类型" dict-type-code="MARKET_TYPE" :value="detail.marketType" />
          <c-list-item label="门店建设类型" dict-type-code="CONST_TYPE" :value="detail.constType" />
          <c-list-item label="商家类别" dict-type-code="BIZMAN_TYPE" :value="detail.bizmanType" />
          <c-list-item label="经销商姓名" :value="detail.customerName" />
          <c-list-item label="经销商电话" :value="detail.customerPhone" />
          <c-list-item label="装修形式" dict-type-code="DECORATION_FORM" :value="detail.decorationForm" />
          <c-list-item label="门店建设范围" dict-type-code="DECORATION_RANGE" :value="detail.decorationRange" />
          <c-list-item label="设计申请面积" suffix="㎡" :value="designInfo.shopTotalArea || 0" />
          <c-list-item label="设计申请时间" :value="designInfo.reportApplyTime" />
        </c-list>
      </c-section>
      <c-section title="装修申请信息">
        <c-list :column="3">
          <c-list-item label="本次装修范围" dict-type-code="DECORATION_RANGE">
            <c-dict-checkbox-select v-model="detail.range" dict-type-code="DECORATION_RANGE" disabled />
          </c-list-item>
          <c-list-item label="装修形式" dict-type-code="DECORATION_FORM" :value="detail.decorationFormCal" />
          <c-list-item label="装修性质" dict-type-code="DECORATION_NATURE" :value="detail.nature" />
          <c-list-item label="数据来源" dict-type-code="DECORATION_DATA_FROM" :value="detail.dataFrom" />
          <c-list-item label="是否需扣除保证金" dict-type-code="BOOLEANS" :value="detail.isDeductCashDeposit" />
          <c-list-item v-if="['1',1].includes(detail.isDeductCashDeposit)" label="(整改)保证金扣款金额" :value="detail.deductCashDepositAmount" />
        </c-list>
      </c-section>
      <c-section title="现场开工条件判断">
        <c-list :column="1" label-width="120px">
          <!-- <c-list-item>
            <c-checkbox-remark v-model="detail.startCondition.constPicRemark" :remark.sync="detail.constPicRemark" label="施工图纸确定" remark-label="施工图纸备注" disabled label-width="200px" remark-label-width="100px" />
          </c-list-item> -->
          <c-list-item>
            <c-checkbox-remark v-model="detail.startCondition.acRemark" :remark.sync="detail.acRemark" label="空调符合装修标准" remark-label="空调备注" disabled label-width="200px" remark-label-width="100px" />
          </c-list-item>
          <c-list-item>
            <c-checkbox-remark v-model="detail.startCondition.wpRemark" :remark.sync="detail.wpRemark" label="防水符合装修标准" remark-label="防水备注" disabled label-width="200px" remark-label-width="100px" />
          </c-list-item>
          <c-list-item>
            <c-checkbox-remark v-model="detail.startCondition.fcRemark" :remark.sync="detail.fcRemark" label="消防符合装修标准" remark-label="消防备注" disabled label-width="200px" remark-label-width="100px" />
          </c-list-item>
          <c-list-item>
            <c-checkbox-remark v-model="detail.startCondition.horizonRemark" :remark.sync="detail.horizonRemark" label="地平已找平" remark-label="地平备注" disabled label-width="200px" remark-label-width="100px" />
          </c-list-item>
          <c-list-item label="预计进场时间" :value="detail.expectDecorationTime" :span="1/3" />
          <c-list-item label="预计开业时间" :value="detail.expectOpenTime" :span="1/3" />
          <c-list-item label="装修申请人" :value="detail.applicantName" :span="1/3" />
          <c-list-item label="装修申请时间" :value="detail.applicantTime" :span="1/3" />
          <c-list-item label="申请说明" :value="detail.expectDesc" />
        </c-list>
      </c-section>
      <c-section title="装修跟进信息">
        <c-list :column="3">
          <c-list-item label="装修进度" dict-type-code="DECORATION_SCHEDULE" :value="detail.schedule" />
          <c-list-item label="装修步骤" dict-type-code="SHOP_DECORATION_STEPS" :value="detail.steps" />
          <c-list-item label="装修状态" dict-type-code="SHOP_DECORATION_STATE" :value="detail.state" />
          <c-list-item label="施工单位" :value="detail.constUnitName" />
          <c-list-item label="工程监理" :value="detail.proSupervisorName" />
          <c-list-item label="形象督导" :value="detail.formSupervisorName" />
          <c-list-item label="实际进场时间" :value="detail.actualApproachTime" />
          <c-list-item label="开工启动会议召开时间" :value="detail.startMeetingHoldTime" />
          <c-list-item label="预计完工时间" :value="detail.expectEndTime" />
          <c-list-item label="隐蔽工程验收时间" :value="detail.hiddenProAcceptTime" />
          <c-list-item label="产品复尺时间" :value="detail.proRerulerTime" />
          <c-list-item label="初检时间" :value="detail.initInspectionTime" />
          <c-list-item label="实际装修完工时间" :value="detail.actualEndTime" />
          <c-list-item label="暂停时间" :format-time="false" :value="detail.stopTime" />
          <c-list-item label="预计恢复时间" :value="detail.expectRestoreTime" />
          <c-list-item label="验收任务号" :value="detail.acceptTaskCode" />
          <c-list-item label="实际报验时间" :value="detail.actualInspectionTime" />
          <c-list-item label="结案类型" dict-type-code="DECORATION_CLOSED_TYPE" :value="detail.decorationClosedType" />
          <!-- <c-list-item label="应整改完成时间" :value="detail.mustRectifyEndTime" /> -->
          <c-list-item label="验收结案时间" :value="detail.acceptEndTime" />
          <c-list-item label="卖场装修区域" :value="$getAreaName(detail.shopDecorationArea)" />
          <c-list-item label="卖场装修总面积" suffix="m²" :value="detail.shopDecorationTotalArea || 0" />
          <c-list-item label="门头装修总面积" suffix="m²" :value="detail.dheadDecorationTotalArea || 0" />
          <c-list-item label="简装图纸总面积" suffix="m²" :value="detail.shopSimpleTotalArea || 0" />
          <c-list-item label="整装图纸总面积" suffix="m²" :value="detail.shopWholeTotalArea || 0" />
        </c-list>
      </c-section>
      <c-section title="色板需求信息">
        <template #title>
          <span style="color:#F56C6C;font-size:12px;margin-left:5px">注：色板、工法展板需求由定制客户经理核实。</span>
        </template>
        <c-list :column="3">
          <c-list-item label="是否需要新店色板包" :value="detail.isNewShopColor?'是':detail.isNewShopColor===0?'否':detail.isNewShopColor" />
          <c-list-item
            v-if="detail.isNewShopColor==1"
            label="需求色板类型"
            dict-type-code="SWATCHES_TYPE"
            multiple
            :value="detail.colorType"
          />
          <c-list-item
            v-if="detail.isNewShopColor==1"
            label="需求明细"
            dict-type-code="SWATCHES_DETAIL"
            multiple
            :value="detail.colorDefiniteDetailed"
          />
          <c-list-item label="是否需要工法展板" :value="detail.isDisplayBoard?'是':detail.isDisplayBoard===0?'否':detail.isDisplayBoard" />
          <c-list-item
            v-if="detail.isDisplayBoard==1"
            label="需求内框尺寸"
            dict-type-code="SWATCHES_SIZE"
            multiple
            :value="detail.innerSize"
          />
        </c-list>
      </c-section>
      <c-section title="窗帘需求信息">
        <c-list :column="3">
          <c-list-item label="是否需要窗帘物料" :value="detail.isCurtain?'是':detail.isCurtain===0?'否':detail.isCurtain" />
          <c-list-item
            v-if="detail.isCurtain==1"
            label="窗帘展示内框尺寸"
            dict-type-code="CURTAIN_SIZE"
            multiple
            :value="detail.curtainSize"
          />
          <c-list-item
            v-if="detail.isCurtain==1"
            label="窗帘样本6QR20078001"
            :value="detail.curtainSamples?'是':detail.curtainSamples===0?'否':detail.curtainSamples"
          />
          <c-list-item
            v-if="detail.isCurtain==1"
            label="轨道五金包6QR20077001"
            :value="detail.railHardware?'是':detail.railHardware===0?'否':detail.railHardware"
          />

        </c-list>
      </c-section>
      <c-section title="超期判断">
        <c-list :column="3">
          <c-list-item label="预计装修申请提报时间" :value="detail.expectApplyReportTime" />
          <c-list-item label="装修申请提报是否超时" dict-type-code="BOOLEANS" :value="detail.isApplyReportOutTime" />
          <c-list-item label="装修进场是否超时" dict-type-code="BOOLEANS" :value="detail.isApproachOutTime" />
          <c-list-item label="恢复时间是否超时" dict-type-code="BOOLEANS" :value="detail.restoreOutTime" />
          <c-list-item label="装修完工是否超时" dict-type-code="BOOLEANS" :value="detail.isEndOutTime" />
          <c-list-item label="预计验收申请提报时间" :value="detail.expectAcceptApplyReportTim" />
          <c-list-item label="是否超时未报验" dict-type-code="BOOLEANS" :value="detail.isUninspectionOutTime" />
          <!-- <c-list-item label="整改是否超时" dict-type-code="BOOLEANS" :value="detail.isRectifyOutTime" /> -->
        </c-list>
      </c-section>
      <c-permission-tabs>
        <el-tab-pane label="关联图纸" name="rd">
          <c-table-box hide-func :data="drawData" :table-config="tableConfig" />
        </el-tab-pane>
        <el-tab-pane label="装修附件" name="accessory">
          <c-file-table-box :model-id="$route.query.id" :editable="false" />
        </el-tab-pane>
        <el-tab-pane label="施工单位委派记录" name="appointLog">
          <c-table-box ref="appointLog" hide-func :data="appointLogData" no-request :table-config="appointLogTableConfig" />
        </el-tab-pane>
        <el-tab-pane label="项目过程评分" name="score">
          <Score :editable="false" :show-title="false" :detail="detail" />
        </el-tab-pane>
      </c-permission-tabs>
    </div>
  </c-log-tabs>
</template>

<script>
import { getGetOneByid, postSelectByModelId, postPageByTecTaskCode, getShopDesignInfo } from '@/api/decorate'
import Score from './components/score'
export default {
  name: 'DecorateDetail',
  components: {
    Score
  },
  data() {
    return {
      drawData: [],
      appointLogData: [],
      // files: [],
      detail: {
        startCondition: {},
        designPictureDTOS: []
      },
      tableConfig: {
        interfacePath: '',
        setting: [
          {
            prop: 'picTaskName',
            label: '图纸名称',
            minWidth: 120,
            className: 'btn-green',
            isButton: true,
            clickFun: this.toDetail
          },
          {
            prop: 'picType',
            label: '图纸类型',
            width: 100,
            propEnum: {
              appCode: 'slm',
              domainCode: 'marketing',
              dictTypeCode: 'PIC_TYPE'
            }
          },
          {
            prop: 'designRange',
            label: '设计范围',
            width: 120,
            propEnum: {
              appCode: 'slm',
              domainCode: 'marketing',
              dictTypeCode: 'DECORATION_RANGE'
            }
          },
          {
            prop: 'decorationType',
            label: '装修形式',
            width: 120,
            render: (h, row) => {
              return h('c-dict-range-view', { props: { dictTypeCode: 'DECORATION_FORM', value: row.decorationType }})
            }
          },
          {
            prop: 'designSpace',
            label: '设计区域',
            minWidth: 120,
            render: (h, row) => {
              return h('c-design-area', { props: { value: row.designSpace }})
            }
          },
          {
            prop: 'designBizType',
            label: '设计业务类型',
            width: 120,
            render: (h, row) => {
              return h('c-dict-range-view', { props: { dictTypeCode: 'BIZ_TYPE', value: row.designBizType }})
            }
            // propEnum: {
            //   appCode: 'slm',
            //   domainCode: 'marketing',
            //   dictTypeCode: 'BIZ_TYPE'
            // }
          },
          {
            prop: 'picTotalArea',
            label: '设计总面积',
            width: 100
          },
          // {
          //   prop: 'endProArea',
          //   label: '成品面积'
          // },
          // {
          //   prop: 'allCustomizedArea',
          //   label: '定制面积'
          // },
          // {
          //   prop: 'overCupboardArea',
          //   label: '橱柜面积'
          // },
          // {
          //   prop: 'bathroomArea',
          //   label: '卫浴面积'
          // },
          // {
          //   prop: 'modelRoomArea',
          //   label: '样板间面积'
          // }
          {
            prop: 'softwareSumArea',
            label: '软体区总面积',
            minWidth: '120'
          },
          {
            prop: 'suiteSumArea',
            label: '套房区总面积',
            minWidth: '120'
          },
          {
            prop: 'newBusinessAreaSummary',
            label: '新业务总面积',
            width: 120
          }
        ]
      },
      appointLogTableConfig: {
        interfacePath: '',
        setting: [
          {
            prop: 'delegateBatch',
            label: '委派批次',
            width: 100
          },
          {
            prop: 'delegateTime',
            label: '委派时间',
            width: 140,
            formatData: this.$parseTimeYMD('delegateTime')
          },
          {
            prop: 'customerConfirmResult',
            label: '经销商确认结果',
            minWidth: 120,
            formatData: v => {
              if (v.customerConfirmResult === 0) {
                return '不同意'
              } else if (v.customerConfirmResult === 1) {
                return '同意'
              }
            }
          },
          {
            prop: 'customerConfirmAdvice',
            label: '经销商确认意见',
            minWidth: 120
          },
          {
            prop: 'unitName',
            label: '委派施工单位',
            minWidth: 160
          }
        ]
      },
      scoreTableConfig: {
        interfacePath: '',
        setting: [
          {
            prop: 'detailItem',
            label: '考核明细'
          },
          {
            prop: 'grading',
            label: '评分标准'
          },
          {
            prop: 'scoreDesc',
            label: '评分说明'
          }
        ]
      },
      designInfo: {} // 设计信息
    }
  },
  created() {
    this.getDetail()
  },
  methods: {
    // 处理编辑数据
    handlerEditData(data) {
      const startCondition = this.$split(data.startCondition)
      data.startCondition = {}
      for (const key of startCondition) {
        data.startCondition[key] = true
      }
      // 范围
      data.range = this.$split(data.range)
      data.shopBizType = this.$split(data.shopBizType)
      return data
    },
    getDetail() {
      const { id, taskCode, constCode } = this.$route.query
      if (!id) return
      getGetOneByid(id).then(res => {
        this.detail = this.handlerEditData(res.data)
        this.getDesignInfo(constCode || res.data.constCode)
      })
      postSelectByModelId(id).then(res => {
        this.drawData = res.data
      })
      postPageByTecTaskCode(taskCode).then(res => {
        this.appointLogData = res.data.records
      })
      // getShopAttachment(id).then(res => {
      //   this.files = res.data
      // })
    },
    // 获取设计信息
    getDesignInfo(constCode) {
      if (!constCode) {
        this.designInfo = {}
        return
      }
      getShopDesignInfo(constCode).then(res => {
        this.designInfo = res.data
      })
    },
    goBack() {
      this.$router.go(-1)
    },
    toDetail(row) {
      this.$router.push({ name: 'ShopDrawingDetail', query: { id: row.id }})
    }
  }
}
</script>
<style lang="scss" scoped>
.detail{

}
</style>
